<template>
  <Container class="mobile-form-modal">
    <div class="mobile-form-modal-inner">
      <div class="title">{{ $t("form.updateName.title") }}</div>
      <a-form class="form" :model="formState" ref="formRef">
        <a-form-item
          class="form-item"
          :label="$t('form.updateName.form.item_1.label')"
          name="value"
          :rules="[
            {
              required: true,
              message: $t('form.updateName.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.value"
            :placeholder="$t('form.updateName.form.item_1.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updateName.form.item_2.label')"
          name="value2"
          :rules="[
            {
              required: true,
              message: $t('form.updateName.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.value2"
            :placeholder="$t('form.updateName.form.item_2.rules.error_1')"
          ></a-input>
        </a-form-item>
      </a-form>
      <div class="footer-btn">
        <div class="footer-btn-inner">
          <a-button @click="goBack">{{ $t("btnText.cancel") }}</a-button>
          <a-button
            class="ensure-btn"
            :class="formIsValid ? '' : 'disabled'"
            type="primary"
            @click="continuePublish"
            >{{ $t("btnText.save") }}</a-button
          >
        </div>
      </div>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { postUpdateMemberOne } from "../../api/member";
import { useMemberStore } from "../../store";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const router = useRouter();
const memberStore = useMemberStore();

const initForm = () => {
  formState.value.value = memberStore.profile?.last_name! || "";
  formState.value.value2 = memberStore.profile?.first_name! || "";
};

const formIsValid = computed(() => {
  let flag = true;
  if (!formState.value.value) flag = false;
  if (!formState.value.value2) flag = false;
  return flag;
});

// 发布
const formState = ref({
  value: "",
  value2: "",
});

const formRef = ref();

const continuePublish = () => {
  if (!formIsValid.value) return;
  formRef.value.validate().then(async () => {
    let data = {
      field: "last_name",
      value: formState.value.value,
    };
    let data2 = {
      field: "first_name",
      value: formState.value.value2,
    };
    let res = await postUpdateMemberOne(data);
    let res2 = await postUpdateMemberOne(data2);
    if (res.code === 200 && res2.code === 200) {
      memberStore.profile!.last_name = formState.value.value;
      memberStore.profile!.first_name = formState.value.value2;
      message.success($t("message.changed_success"));
      goBack();
    } else {
      goBack();
      message.error($t("message.error.update"));
    }
  });
};
const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  initForm();
});
</script>
<style lang="less">
.mobile-form-modal {
  .wrap-container > .wrap-pl {
    padding-bottom: 0 !important;
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");
</style>
